'use client';

import { Typography, Spin } from 'antd';
import { api } from '~/trpc/react';
import { TaskDetail } from '~/components/tasks/TaskDetail';

const { Title } = Typography;

interface ContentViewerProps {
  courseId: string;
  taskId?: string;
  stepId?: string;
}

export function ContentViewer({ courseId, taskId, stepId }: ContentViewerProps) {
  // 获取任务详情
  const { data: task, isLoading: taskLoading } = api.tasks.getById.useQuery(
    { taskId: taskId! },
    { enabled: !!taskId }
  );

  // 获取步骤详情
  const { data: step, isLoading: stepLoading } = api.steps.getById.useQuery(
    { stepId: stepId! },
    { 
      enabled: !!stepId,
      // 添加错误处理
      onError: (error) => {
        console.error('Failed to fetch step:', error);
      }
    }
  );

  if (taskLoading || stepLoading) {
    return <Spin className="w-full h-full flex items-center justify-center" />;
  }

  if (!task && !step) {
    return (
      <div className="p-8">
        <Title level={4}>请选择左侧任务或步骤开始阅读</Title>
      </div>
    );
  }

  if (task) {
    return (
      <div className="p-8 max-w-4xl mx-auto">
        <TaskDetail task={task} />
      </div>
    );
  }

  if (step) {
    return (
      <div className="p-8 max-w-4xl mx-auto">
        <Title level={3}>{step.title}</Title>
        {step.description && (
          <Typography.Paragraph>{step.description}</Typography.Paragraph>
        )}
      </div>
    );
  }

  return null;
} 